{% extends 'base.html' %}
{% block title %}
    <title>cmdb管理平台——主机管理</title>
{% endblock %}
{% block body %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h1 class="page-header">控制台</h1>
        <h2 class="sub-header">主机管理</h2>
        <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">添加主机</button>
        <div class="table-responsive">
            <!-- 模态框结构 -->
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
                  
                <div class="modal-dialog" role="document">
                        
                    <div class="modal-content">
                              
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title">添加主机</h4>
                        </div>
                             
                        <div class="modal-body">
                            <!-- 此处是在模态框中显示的内容 -->
                            <form action="{% url 'hostlist' %}" method="POST">
                                {% csrf_token %}
                                <div class="form-group">
                                    <label for="hostname">主机名称</label>
                                    <input type="text" class="form-control" name="hostname" id="hostname"
                                           placeholder="主机名称">
                                </div>
                                <div class="form-group">
                                    <label for="ip">ip地址</label>
                                    <input type="text" class="form-control" name="ip" id="ip" placeholder="ip地址">
                                </div>
                                <div class="form-group">
                                    <label for="server_type">主机类型</label>
                                    <select class="form-control" id="server_type" name="type">
                                        {#                                        type_tuple = ((1, 'web'), (2, 'db'), (3, 'proxy'), (4, 'lb'), (5, 'cache'))#}
                                        <option value="1">web</option>
                                        <option value="2">db</option>
                                        <option value="3">proxy</option>
                                        <option value="4">lb</option>
                                        <option value="5">cache</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <h5>主机状态</h5>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" value="0">在线
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" value="1">不在线
                                    </label>
                                </div>
                                <input type="submit" class="btn btn-primary" value="添加">
                            </form>
                        </div>
                            
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <!-- <button type="button" class="btn btn-primary" id="save">添加</button> -->
                            <input type="submit" class="btn btn-primary" id="ajaxadd" value="添加">
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>主机名称</th>
                    <th>ip地址</th>
                    <th>服务器类型</th>
                    <th>服务器状态</th>
                    <th>管理操作</th>
                </tr>
                </thead>
                <tbody>
                {% for one in hostlist %}
                    <tr>
                        <td>{{ one.id }}</td>
                        <td>{{ one.hostname }}</td>
                        <td>{{ one.ip }}</td>
                        <td>{{ one.get_type_display }}</td>
                        {% if one.status == 0 %}
                            <td style="color: green">√</td>
                        {% else %}
                            <td style="color: red">X</td>
                        {% endif %}
                        <td>
                            {% if one.status == 0 %}
                                <button class="btn btn-warning btn-sm my-status">禁用</button>
                            {% else %}
                                <button class="btn btn-info btn-sm my-status">启用</button>
                            {% endif %}
                            <button class="btn btn-danger btn-sm">删除</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        // 收集表单数据通过ajax提交
        //1.按钮添加点击事件
        $('#ajaxadd').click(function () {
            //2.收集表单数据
            data = $("form").serialize()
            //3.发送ajax请求
            $.ajax({
                type: "post",
                url: "{% url 'hostlist' %}",
                data: data,
                dataType: "json",
                success: function (response) {
                    //4.处理数据结果
                    {#console.log(response)#}
                    if (response.status == 0) {
                        layer.msg('添加成功', {
                            icon: 1
                        })
                        window.location.reload()
                    } else {
                        layer.msg(response.msg, {
                            icon: 2
                        })
                        {#window.location.reload()#}
                    }
                }
            })
        })
        // 更新主机状态
        //1.绑定状态按钮
        $('.my-status').click(function () {
            //2.确认是哪个host 获取id
            id = $(this).parent().parent().children('td').eq(0).html()
            //3.发送host信息给后端
            $.ajax({
                type: "get",
                url: "{% url 'hoststatus' %}",
                data: {'id': id},
                dataType: "json",
                success: function (response) {
                    //4.处理数据结果
                    {#console.log(response)#}
                    if (response.status == 0) {
                        layer.msg('更新成功', {
                            icon: 1
                        })
                        window.location.reload()
                    } else {
                        layer.msg('更新失败', {
                            icon: 2
                        })
                        {#window.location.reload()#}
                    }
                }
            })
        })
        //删除主机
        //1.绑定按钮事件
        $('.btn-danger').click(function () {
            //2.收集信息数据
            id = $(this).parent().parent().children('td').eq(0).html()
            //3.发送ajax请求 携带数据 给服务端
            $.ajax({
                type: "get",
                url: "{% url 'hostdelete' %}",
                data: {'id': id},
                dataType: "json",
                success: function (response) {
                   //4.处理现实前端页面
                    console.log(response)
                    if(response.status == 0){
                        window.location.reload()
                    }else{
                        layer.msg('删除失败')
                    }
                }
            })
        })


        // ========================================================================之前
        // 1.请求数据获取后端数据
        //$.ajax({
        // 请求方式  常见get post
        //type: "get",
        // 后端请求地址  服务器端
        //url: "http://127.0.0.1:3000/hosts",
        // 传给后端的数据
        // data: "data",
        // 数据传输的类型
        //dataType: "json",
        // 请求成功之后  调用函数
        //success: function (response) {
        // response 服务器返回的信息
        // console.log(response)
        // 调用拼接html字符串 并且追加到页面中
        //load_data(response)
        // button渲染之后  再进行绑定事件
        //host_delete()
        //}
        //});


        // 2.拼接模板html标签 追加写入到页面中
        function load_data(data) {
            //  console.log(data)
            // 空字符串
            var tpl = ''
            for (var i = 0; i < data.length; i++) {
                tpl += '<tr>'
                tpl += '<td>' + data[i].id + '</td>'
                tpl += '<td>' + data[i].hostname + '</td>'
                tpl += '<td>' + data[i].ip + '</td>'
                tpl += '<td>' + data[i].type + '</td>'
                tpl += '<td>' + data[i].status + '</td>'
                tpl +=
                    '<td><button class="btn btn-info btn-sm">更新</button><button class="btn btn-danger btn-sm">删除</button></td>'
                tpl += '</tr>'
                //  console.log(data[i])
            }
            // console.log(tpl)
            // $('tbody').html(tpl)
            $('tbody').append(tpl)
        }

        // 事件没有绑定到button上  在ajax里的回调函数里调用此函数
        function host_delete() {
            // 删除操作  假删除  只操作前端DOM
            $('.btn-danger').click(function () {
                // confirm 确认框  点击确定返回true
                // if (confirm('确认删除吗?')) {
                // this是js还是jq对象？
                // parent() 方法是谁的方法？ 找父元素
                // 怎么办？
                //询问框
                // console.log(this.innerHTML)
                current_button = $(this)
                layer.confirm('确认删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    // this 变化了 这里的this是layer
                    // console.log(this)
                    // 传输数据给后端服务器  传id过去
                    // json-server 删除数据 需要使用到DELETE
                    // 获取当前页面的id
                    id = current_button.parent().parent().children('td').eq(0).html()
                    // alert(id)
                    $.ajax({
                        // restfull api 风格
                        // GET 获取数据
                        // POST 修改数据
                        // PUT  添加数据
                        // DELETE 删除数据
                        // json-server 删除数据的  格式 delete请求方式
                        type: "delete",
                        url: "http://127.0.0.1:3000/hosts/" + id,
                        // data: "{id:"+id+"}",
                        dataType: "json",
                        success: function (response) {
                            console.log(response)
                        }
                    });

                    current_button.parent().parent().remove()
                    layer.msg('删除成功', {
                        icon: 1
                    })
                    // 关闭所有layer打开的窗口
                    // layer.closeAll()
                }, function () {

                });
                // }
            })
        }
    </script>
{% endblock %}